<script setup>
  // 导入three.js
  import * as THREE from 'three'
  // 导入轨道控制器
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  // 导入 dat.gui
  import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

  // 创建一个场景
  const scene = new THREE.Scene()
  // 创建一个相机
  const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近截面
    1000 // 远截面
  )
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  // 创建一个立方体
  const geometry = new THREE.BoxGeometry(2, 1, 2)
  const geometryParent = new THREE.BoxGeometry(1, 1, 1)
  // 创建几何体
  const bufferGeometry = new THREE.BufferGeometry()
  // 创建顶点数据 顶点的顺序 三个为一个点 逆时针为正面
  const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
  // 创建顶点属性
  bufferGeometry.setAttribute(
    'position',
    new THREE.BufferAttribute(vertices, 3)
  )
  // 创建索引
  const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
  // 创建索引属性
  bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1))
  // 设置2个顶点组 形成2个材质
  bufferGeometry.addGroup(0, 3, 0)
  bufferGeometry.addGroup(3, 3, 1)

  // 创建材质
  const material = new THREE.MeshBasicMaterial({
    color: '#43cb85',
    side: THREE.DoubleSide,
    wireframe: true,
  })
  const materialParent = new THREE.MeshBasicMaterial({ color: '#de21bb' })
  // 每个面不同材质
  const material1 = new THREE.MeshBasicMaterial({ color: '#43cb85' })
  const material2 = new THREE.MeshBasicMaterial({ color: '#f31616' })
  const material3 = new THREE.MeshBasicMaterial({ color: '#5778db' })
  const material4 = new THREE.MeshBasicMaterial({ color: '#35d0b1' })
  const material5 = new THREE.MeshBasicMaterial({ color: '#de21bb' })
  const material6 = new THREE.MeshBasicMaterial({ color: '#ee9211' })
  // 创建网格
  const parentCube = new THREE.Mesh(geometryParent, materialParent)
  const cube = new THREE.Mesh(geometry, [
    material1,
    material2,
    material3,
    material4,
    material5,
    material6,
  ])
  const plane = new THREE.Mesh(bufferGeometry, [materialParent, material])
  // 以父元素为基点
  parentCube.add(cube)

  // 设置立方体位置
  parentCube.position.set(-3, 0, 0)
  cube.position.set(3, 0, 0)
  plane.position.set(3, 0, 0)
  // 设置立方体缩放
  cube.scale.set(1, 1, 1)
  // 设置立方体旋转
  cube.rotation.set(Math.PI / 2, 0, 0)
  // 将网格添加入场景中
  scene.add(parentCube)
  scene.add(plane)
  // 设置相机位置
  camera.position.set(0, 3, 5)
  camera.lookAt(0, 0, 0)
  // 添加世界坐标辅助器
  const axesHelper = new THREE.AxesHelper(5)
  // scene.add(axesHelper)
  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)
  // 设置带阻尼的惯性
  controls.enableDamping = true
  // 设置阻尼的系数
  controls.dampingFactor = 0.05
  // 设置自动旋转
  // controls.autoRotate = true
  // 设置自动旋转的速度
  controls.autoRotateSpeed = 0.5

  // 渲染动画
  function animate() {
    controls.update()
    requestAnimationFrame(animate)
    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01
    // 渲染
    renderer.render(scene, camera)
  }
  animate()

  // 监听窗口尺寸变化
  window.addEventListener('resize', () => {
    // 更新渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()
  })

  // 点击全屏
  const buttonClick = () => {
    // 画布全屏
    renderer.domElement.requestFullscreen()
  }

  let eventObj = {
    Fullscreen: () => {
      // 界面全屏
      document.body.requestFullscreen()
    },
    ExitFullscreen: () => {
      // 退出全屏
      document.exitFullscreen()
    },
  }

  // 创建GUI
  const gui = new GUI()
  // 添加按钮
  gui.add(eventObj, 'Fullscreen').name('全屏')
  gui.add(eventObj, 'ExitFullscreen').name('退出全屏')
  // 创建文件夹
  let folder = gui.addFolder('立方体位置')
  // 控制立方体的位置
  folder
    .add(cube.position, 'x')
    .min(-5)
    .max(5)
    .step(0.1)
    .name('立方体X轴')
    .onChange(() => {
      console.log('拖动就会触发')
    })
  folder
    .add(cube.position, 'y')
    .min(-5)
    .max(5)
    .step(0.1)
    .name('立方体Y轴')
    .onFinishChange(() => {
      console.log('拖完才会触发')
    })
  folder.add(cube.position, 'z').min(-5).max(5).step(0.1).name('立方体Z轴')
  // 设置线框
  gui.add(parentCube.material, 'wireframe').name('父元素线框模式')

  let colorParams = {
    cubeColor: '#de21bb',
  }
  gui
    .addColor(colorParams, 'cubeColor')
    .name('父立方体颜色')
    .onChange(value => {
      parentCube.material.color.set(value)
    })
</script>

<template>
  <button @click="buttonClick">点击全屏</button>
</template>

<style scoped>
  canvas {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
  button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
  }
</style>
